<template>
	<view class="main">
		<!-- 自定义导航 -->
		<uni-nav-bar :fixed="true" :status-bar="true">
			<block slot="left">
				<view class="index-nav-left" @tap="searchClick"><view class="icon iconfont " :class="[searched?'icon-shuaxin':'icon-icon-']" ></view></view>
			</block>
			
			<view class="tab-bar">
				<block v-for="(tab, index) in tabBars" :key="index">
					<!-- tap 触摸事件 -->
					<view v-if="index === tabBars.length - 1" class="swiper-tab-list" :class="{ active: index === tabIndex }" @tap="tabChang(index)">
						{{ userInfo.sex === 1 ? '女神' : '男神' }}
					</view>
					<view v-else class="swiper-tab-list" :class="{ active: index === tabIndex }" @tap="tabChang(index)">
						{{ tab.name }}
					</view>
				</block>
			</view>
			
			<block slot="right">
				<view class="uni-flex index-nav-city" @tap="chooseCity">
					<view class="iconfont icon-xia"></view>
					{{ cityInfo.name }}
				</view>
			</block>
		</uni-nav-bar>
		
		<!-- 自定义标题结束 -->

		<view class="uni-tab-bar">
			<swiper @change="changSelected" :current="tabIndex" class="swiper-box" :style="{ height: swiperHeight + 'px' }">
				<swiper-item v-for="(data, idx) in infoList" :key="idx">
					<scroll-view scroll-y="true" class="list" @scrolltolower="loadMore(tabIndex)">
						<view class="waterfall">
							<view>
								<block v-if="index % 2 === 0" v-for="(item, index) in data.userList" :key="index">
									<view class="list-item"><index-list :index="index" @follow="follow" :user="item"></index-list></view>
								</block>
							</view>
							<view>
								<block v-if="index % 2 !== 0" v-for="(item, index) in data.userList" :key="index">
									<view v-if="index==1" class="list-item"><index-list :user="vip"></index-list></view>
									<view  class="list-item"><index-list :index="index" @follow="follow" :user="item"></index-list></view>
								</block>
							</view>
						</view>

						<load-more :loadText="data.loadText" :imgs="loadImg" :loading="data.loading"></load-more>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import indexList from '../../components/index/index-list.vue';
import swiperTabHead from '../../components/index/swiper-tab-head.vue';
import loadMore from '../../components/common/load-more.vue';
import { mapState, mapMutations } from 'vuex';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	computed: {
		...mapState(['cityInfo', 'userInfo','searchText'])
	},
	components: { uniNavBar, indexList, swiperTabHead, loadMore },
	data() {
		return {
			loadImg: [
				'../../static/loding/fox0.png',
				'../../static/loding/fox1.png',
				'../../static/loding/fox2.png',
				'../../static/loding/fox3.png',
				'../../static/loding/fox4.png',
				'../../static/loding/fox5.png',
				'../../static/loding/fox6.png',
				'../../static/loding/fox7.png'
			],
			tabBars: [{ name: '附近', id: 'fujin' }, { name: '新人', id: 'xinren' }, { name: '男/女神', id: 'nvsheng' }],
			tabIndex:0,
			swiperHeight: 0,
			infoList: [
				{
					loadText: '上拉加载更多',
					loading: false,
					userList: [],
					page:1,
					url: constant.baseHttpUri + constant.pathUri.nearby
				},
				{
					loadText: '上拉加载更多',
					loading: false,
					userList: [],
					page:1,
					url: constant.baseHttpUri + constant.pathUri.currentUser
				},
				{
					loadText: '上拉加载更多',
					loading: false,
					userList: [],
					page:1,
					url: constant.baseHttpUri + constant.pathUri.userTop
				}
			],
			moveBarHeiht: 0,
			vip: { type: 'img', url: '../../static/vip/vip.png' },
			cityName:'',
			searched:false
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.swiperHeight = res.windowHeight - 86;
			}
		});
		if(uni.getStorageSync(constant.user)){
			this.initData();
		}
	},
	onShow() {
		if(uni.getStorageSync(constant.first)){
			this.initData();
			uni.removeStorage({
				key:constant.first
			});
		}
		let user = uni.getStorageSync(constant.user);
		if(this.cityName!==this.cityInfo.name&&user){
			this.reloadData();
			this.cityName=this.cityInfo.name;
		}
		if(this.searchText){
			this.searched=true;
			 this.reloadData(this.searchText);
			 this.setSearchText('');
		}
		uni.getStorage({ 
			key:'user-info-block', 
			success:data=>{
				if(data&&data.data){
					this.reloadData();
					uni.setStorageSync('user-info-block',0);
				}
			}
		})
	},
	methods: {
		...mapMutations(['setSearchText']),
		initData(){
			this.infoList.forEach((v,index)=>{
				this.loadData(index);
			});
			this.cityName=this.cityInfo.name;
		},
		// 滑动切换数据
		changSelected(e) {
			this.tabIndex=e.detail.current;
		},
		tabChang(index){
			this.tabIndex=index;
		},
		// 附近的人
		loadData(index,searchText){
			let user = uni.getStorageSync(constant.user);
			let dataSet = {
				"longitude":this.cityInfo.longitude||user.longitude,
				"latitude":this.cityInfo.latitude||user.latitude,
				"pageNo": this.infoList[index].page
			};
			if(searchText){
				dataSet.nickName=searchText;
			}
			uni.request({
			    url: this.infoList[index].url,
			    data: dataSet,
			    header: constant.authHead(),
				method: 'POST',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						this.infoList[index].userList.push(...res.data.data);
					}else{
						showToast(res.data.msg);
					}
			    },fail(r){
					console.log(r);
				},complete:res=>{
					this.infoList[index].loading = false;
				}
			});
		},
		searchClick() {
			if(!this.searched){
				uni.navigateTo({
					url: '../search/search'
				});
			}else{
				this.searched=false;
				this.reloadData();
			}
		},
		chooseCity() {
			uni.navigateTo({
				url: '../city/city'
			});
		},
		loadMore(index) {
			if (this.infoList[index].loadText !== '上拉加载更多') return;
			this.infoList[index].loading = true;
			this.infoList[index].page +=1;
			this.loadData(index);
		},
		follow(index){
			uni.request({
			    url: constant.baseHttpUri + constant.pathUri.userFollow,
			    data: {
					"followId":this.infoList[this.tabIndex].userList[index].id
				},
			    header: constant.authHead(),
				method: 'GET',
			    success: res => {
					if(res.data.code === constant.dataCode.OK ){
						if(res.data.data){
							this.infoList[this.tabIndex].userList[index].followStatus = false;
						}else{
							this.infoList[this.tabIndex].userList[index].followStatus = true;
						}
					}else{
						showToast(res.data.msg);
					}
			    },fail(r){
					console.log(r);
				}
			});
		},
		reloadData(search){
			this.infoList.forEach((v,index)=>{
				this.infoList[index].userList=[];
				this.infoList[index].page=1;
				if(search){
					this.loadData(index,search);
				}else{
					this.loadData(index);
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.main {
	background: #f5f7fa;
}
.index-nav-left {
	width: 40%;
	view {
		margin-left: 16rpx;
		font-size: 40rpx;
	}
	.icon-icon-::before{
		font-size: 46rpx;
		color: #a3a3a3;
	}
	.icon-shuaxin::before{
		font-size: 30rpx;
		color: #a3a3a3;
	}
}
.index-nav-city {
	font-size: 34rpx;
	margin-left: -30rpx;
	color: #a3a3a3;
	.icon-xia::before{
		font-size: 34rpx;
		
	}
}

// 流式布局
.waterfall {
	padding-left: 25rpx;
	padding-right: 25rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	.list-item{
		margin-top: 15rpx;
	}
}
.tab-bar {
	display: flex;
	flex-direction:row;
	justify-content: center;
	
	.swiper-tab-list {
		color: #a3a3a3;
		font-weight: 500;
		font-size: 36rpx;
		width: 110rpx;
	}
	.active {
		color: #343434;
		font-weight: 700;
	}
}
</style>
